<template>
  <div class="topology-container">
    <button @click="sendData">发送消息</button>

    <iframe ref="topologyFrame" :src="iframeUrl" frameborder="0" class="topology-iframe"></iframe>
  </div>
</template>

<script>
export default {
  name: 'TopologyContainer',
  data() {
    return {
      iframeUrl: '/top/index.html',
      topology: [
        {
          id: 'web',
          label: '前端应用层',
          children: [
            {
              id: 'gateway',
              label: 'API 网关层',
              children: [
                {
                  id: 'auth',
                  label: '认证服务',
                  children: [
                    {
                      id: 'mysql1',
                      label: 'MySQL 集群'
                    }
                  ]
                },
                {
                  id: 'user',
                  label: '用户服务',
                  children: [
                    {
                      id: 'mysql21',
                      label: 'MySQL 集群1'
                    },
                    {
                      id: 'redis1',
                      label: 'Redis 集群1'
                    },
                  ]
                },
                {
                  id: 'order',
                  label: '订单服务',
                  children: [
                    {
                      id: 'mysql31',
                      label: 'MySQL 集群1'
                    },
                    {
                      id: 'mq1',
                      label: 'RabbitMQ 集群1'
                    },
                    {
                      id: 'mysql32',
                      label: 'MySQL 集群2'
                    },
                    {
                      id: 'mq2',
                      label: 'RabbitMQ 集群2'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.sendData();
  },
  methods:{
    sendData() {
      this.$refs.topologyFrame.contentWindow.postMessage({
          type: 'updateTopology',
          topology: this.topology
        }, "*")
    }
  },
}
</script>

<style scoped>
.topology-container {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.topology-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>
